<template>
  <div class='container'>
    <CardHeader :elColSpan="[18,6]">
      <template #left>
        <el-form :inline="true" ref="formInline" :model="formInline" class="demo-form-inline">
          <el-form-item label="关键字" prop="user">
            <el-input v-model="formInline.user" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="region">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="resetForm">清除</el-button>
            <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #right>
        <el-button type="success" icon="el-icon-edit" size="small" @click="addArticles">新增技巧</el-button>
      </template>
    </CardHeader>

    <!-- 消息提示 -->
    <el-alert
    :title="'数据一共'+counts+'条'"
    type="info"
    :closable="false"
    show-icon>
  </el-alert>

  <!-- 表格 -->
   <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{background:'#fafafa'}"
      >
      <el-table-column
      type="index"
        label="序号"
        width="80"
        >
      </el-table-column>
      <el-table-column
        label="文章列表">
        <template slot-scope="{row}">
          {{row.title}}
          <el-button @click="showVideo(row)" v-if="row.videoURL" type="text" class="el-icon el-icon-video-camera-solid"></el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="visits"
        label="阅读数"
        >
      </el-table-column>
      <el-table-column
        prop="username"
        label="录入人"
        >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="录入时间"
        >
        <template slot-scope="{row}">
          {{row.createTime | parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        >
        <template slot-scope="{row}">
          {{row.state ? '已启用':'已禁用'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="180">
        <template slot-scope="{row}">
        <el-button type="text" @click="OnPreview(row)">预览</el-button>
        <el-button type="text" @click="OpenOrClose(row)">
          {{!row.state ? '启用':'禁用'}}
        </el-button>
        <el-button type="text" :disabled='row.state === 1' @click="EditAddform(row)">修改</el-button>
        <el-button type="text" :disabled='row.state === 1' @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <Pagination
    :counts="counts"
    :page="pageForm"
    @changePageSize="changePageSize"
    @changeCurrentPage="changeCurrentPage"
    />

    <!-- 预览对话框 -->
    <el-dialog
      title="预览文章"
      :visible.sync="isShowPreview"
      width="50%">
      <h2>{{title}}</h2>
     <div class="preview">
      <span>{{time | parseTimeByString}}</span>
      <span>{{username}}</span>
      <span class="el-icon el-icon-view"></span>
      <span>{{read}}</span>
      </div>
      <div class="contant">
        <p v-html="articleBody"></p>
      </div>
    </el-dialog>

    <!-- 新增及修改 -->
    <el-dialog
      title="新增文章"
      :visible.sync="isShowAdd"
      @closed='AddClose'
      width="50%">
    <el-form ref="Addform" :model="Addform" label-width="80px">
      <el-form-item label="文章标题:" prop="title">
        <el-input v-model="Addform.title" placeholder="请输入文章标签"></el-input>
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
        <quill-editor v-model="Addform.articleBody" ref="myQuillEditor" :options="editorOption"></quill-editor>
      </el-form-item>
      <el-form-item label="视频地址:" prop="videoURL">
        <el-input v-model="Addform.videoURL" placeholder="请输入视频地址"></el-input>
      </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddClose">取 消</el-button>
        <el-button type="primary"  @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹层 -->
    <div class="Mask" v-if="isShowMask">
      <i class="el-icon-error" @click="isShowMask=false"></i>
      <div class="video">
      <vueMiniPlayer  ref="vueMiniPlayer" :video="video1" :mutex="true" />
      </div>
    </div>
  </div>
</template>

<script>
import { list, changeState, update, add, remove } from '@/api/hmmm/articles.js'
import hljs from 'highlight.js'
export default {
  data () {
    return {
      tableData: [], // 表格数据
      formInline: {
        user: '',
        region: ''
      }, // 搜索框
      pageForm: {
        page: 1, // 当前页数
        pagesize: 10, // 一页显示条数
        keyword: '', // 关键字
        state: ''// 状态 1 开启 0 屏蔽
      }, // 查询条件
      counts: 0, // 总条数
      isShowPreview: false, // 预览对话框显示
      title: '', // 预览标题
      time: '', // 预览时间
      username: '', // 预览用户名
      read: '', // 预览浏览量
      articleBody: '', // 预览内容
      isShowAdd: false, // 新增及修改弹层
      Addform: {
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: ''// 视频地址
      }, // 新增及修改数据
      // 富文本及代码高亮
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        }
      },
      // 遮罩层
      isShowMask: false
    }
  },
  created () {
    this.loadTableInfo()
  },
  computed: {
    $video () {
      return this.$refs.vueMiniPlayer.$video
    },
    video1 () {
      return {
        url: '',
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: true
      }
    }
  },
  methods: {
    // 加载表格内容
    async loadTableInfo (e) {
      const obj = {}
      this.pageForm = { ...e, ...this.pageForm }
      for (const key in this.pageForm) {
        if (this.pageForm[key] || this.pageForm[key] === 0) {
          obj[key] = this.pageForm[key]
        }
      }
      const res = await list(obj)
      this.counts = res.data.counts
      this.tableData = res.data.items
    },
    // 搜索
    onSubmit () {
      this.pageForm.keyword = this.formInline.user
      this.pageForm.state = this.formInline.region
      const obj = {}
      for (const key in this.pageForm) {
        if (this.pageForm[key] || this.pageForm[key] === 0) {
          obj[key] = this.pageForm[key]
        }
      }
      this.loadTableInfo(obj)
    },
    // 清除按钮
    resetForm () {
      this.$refs.formInline.resetFields()
      this.onSubmit()
    },
    // 点击预览按钮
    OnPreview (row) {
      console.log(row)
      this.title = row.title
      this.time = row.createTime
      this.username = row.username
      this.read = row.visits
      this.articleBody = row.articleBody
      this.isShowPreview = true
    },
    // 状态
    async OpenOrClose (row) {
      row.state = !row.state ? 1 : 0
      await changeState(row)
      this.$message.success('操作成功')
      this.loadTableInfo()
    },
    // 新增及修改弹层关闭
    AddClose () {
      this.isShowAdd = false
      // this.$refs.Addform.resetFields()
      this.Addform = {
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: ''// 视频地址
      } // 新增及修改数据
    },
    // 修改
    EditAddform (row) {
      this.isShowAdd = true
      this.Addform = { ...row }
    },
    // 点击确定
    async handleConfirm () {
      if (this.Addform.id) {
        // 修改
        await update(this.Addform)
        this.$message.success('修改成功')
      } else {
        // 新增
        await add(this.Addform)
        this.$message.success('添加成功')
      }
      this.isShowAdd = false
      this.loadTableInfo()
    },
    // 新增文章
    async addArticles () {
      this.isShowAdd = true
    },
    // 删除文章
    handleDelete (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.loadTableInfo()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // pagesize
    changePageSize (val) {
      this.pageForm.pagesize = val
      this.loadTableInfo(this.pageForm)
    },
    // page
    changeCurrentPage (val) {
      this.pageForm.page = val
      this.loadTableInfo(this.pageForm)
    },
    // 显示视频
    showVideo (row) {
      this.isShowMask = true
      this.video1.url = row.videoURL
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  padding: 20px;
  background-color: #fff;
}
.demo-form-inline{
  .el-form-item:nth-child(2){
    margin-left: 30px;
  }
}
.el-alert{
  margin-bottom: 15px;
}
.preview{
  border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
::v-deep span{
  margin: 0 5px;
}
}
.contant{
    background: #f5f5f5;
    padding: 10px;
}
::v-deep .ql-editor{
  height: 176px;
}
::v-deep .el-dialog__footer{
  text-align: right !important;
}
.Mask{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, .2);

  i{
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%,-50%);
    font-size:60px;
    opacity: 0.5;
  }
  .video{
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
}
</style>
